
<template>
  <div>
    <Card>
      <Tabs v-model="tabName" :animated="false" style="overflow: visible">
        <TabPane label="活动详情" class="tab" name="details">
          <Divider orientation="left">活动详情</Divider>
          <div>
            <Form ref="form" :model="form" :label-width="100" disabled>
              <FormItem label="海报" required>
                <upload-pic-input v-model="form.posterUrl" style="width: 350px" placeholder="上传图片尺寸：750*300px"></upload-pic-input>
              </FormItem>
              <FormItem label="活动标题" required>
                <div class="item">
                  <Input v-model="form.name" placeholder="请输入活动名称" />
                </div>
              </FormItem>
              <FormItem label="活动时间" required>
                <Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" placeholder="选择活动日期和时间" v-model="form.activityStartStopTime" style="width: 350px"></Date-picker>
              </FormItem>
              <FormItem class="form-item-view-el" label="投放区域" required>
                <RadioGroup type="button" button-style="solid" v-model="form.salesArea">
                  <Radio title="全国投放" :label="0">
                    <span>全国投放</span>
                  </Radio>
                  <Radio title="区域投放" :label="1">
                    <span>区域投放</span>
                  </Radio>
                </RadioGroup>
                <region v-if="form.salesArea=='1'" :addressId="morenregionId" style="width: 350px;margin-top:24px" />
              </FormItem>
              <FormItem class="form-item-view-el" label="活动内容" required>
                <editor openXss v-model="form.content"></editor>
              </FormItem>
            </Form>
          </div>
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>

<script>
import {
  activityDetail,
} from "@/api/activity.js"
import uploadPicInput from "@/views/my-components/lili/upload-pic-input"
import region from "@/views/lili-components/region-every"
import editor from "@/views/my-components/lili/editor"

export default {
  name: "publicity-detail",
  components: {
    editor,
    uploadPicInput,
    region
  },
  data () {
    return {
      morenregionId: [],// 默认地区
      form: {
        name: "", //商家名称
        salesArea: 0,// 销售区域
        name: '', //活动名称
        content: '',
        activityType: 0,//活动类型
        registrationStartStopTime: '',//报名起止时间
        activityStartStopTime: '',//活动起止时间
        posterUrl: '',
        regionId: '',
        launchArea: '',
      },//活动详情
      goodsId: '', // 商品活动id量
      total: 0, //店铺列表条数
      loading: false,
      tabName: "details", // tab栏name值
      tabNameList: ["details"], // tab栏name值数组
    }

  },
  methods: {
    // 初始化数据
    init () {
      //获取活动信息
      this.getActivityInfo()
    },
    // 获取活动信息
    getActivityInfo () {
      let params = {
        activityId: this.goodsId
      }
      //活动详情
      activityDetail(this.goodsId).then((res) => {
        if (res.success) {
          this.form = {
            ...res.result,
            registrationStartStopTime: [res.result.registrationStartTime, res.result.registrationEndTime],
            activityStartStopTime: [res.result.activityStartTime, res.result.activityEndTime],
            salesArea: Number(res.result.salesArea)
          }
          if (res.result.salesArea + '' === '1') {
            this.morenregionId = res.result.regionId
          }

        }
      })
    },
  },
  created () {
    this.goodsId = this.$route.query.id
    this.init()
  },
};
</script>
<style lang="scss" scoped>
/deep/ .ivu-tabs-bar {
  margin: 0;
}

.tab {
  padding: 16px;
  position: relative;
}

.item {
  width: 350px !important;
  display: flex;

  > * {
    margin: 0 4px;
  }
}
</style>
